<template>
    <div>
        <el-card>
            <el-tabs v-model="activeName" @tab-click="oneTabs">
                <el-tab-pane label="粉丝关注定时推送" name="first">
                    <el-tabs type="border-card" @tab-click="tabsTiming">
                        <el-tab-pane label="粉丝关注定时推送信息">
                            <div class="errmsgbox">提示：<br>1、只有通过微信认证的公众号才能使用本推送功能；推送信息时<font color="red">不占用公众号规定的群发次数</font>。
                                <br>2、本功能的使用场景：粉丝关注公众号后定时推送信息；比如，一个粉丝关注了公众号，以关注时间算起，可以设置30分、60分……后主动的对TA推送一条信息。
                                <br>3、粉丝关注后多长时间推送信息（最小值不能低于0秒、最大值不能超过48小时）。<br>
                                4、免费试用期内，当前可用条数：<strong style="color:red" id="guanzhutsmsg_s">{{usableStrip}}</strong>，已用条数：<strong style="color:red" id="guanzhutsmsg_count">{{usedStrip}}</strong>，若条数已用完，请及时<u>在线支付开通服务</u>。
                            </div>

                            <el-table
                                :data="timingTableData"
                                border
                                style="width: 100%;margin:20px 0 0;text-align:center">
                                <el-table-column
                                prop="rule"
                                width="100">
                                </el-table-column>
                                <el-table-column
                                prop="howTime"
                                width="220"
                                label="粉丝关注后多长时间推送">
                                </el-table-column>
                                <el-table-column
                                prop="successStrip"
                                width="220"
                                label="成功推送条数">
                                </el-table-column>
                                <el-table-column
                                prop="taskNumber"
                                width="220"
                                label="待发送任务数">
                                </el-table-column>
                                <el-table-column
                                width="220"
                                label="状态">
                                    <template slot-scope="scope">
                                        <font v-if="scope.row.status" color="green">生效中</font>
                                        <font v-else color="red">未开启生效</font>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" min-width="310">
                                    <template slot-scope="scope">
                                        <a class="timinga" href="javascript:void(0)" @click="messageEdit(scope.row)">编辑</a> |
                                        <a class="timinga" href="javascript:void(0)" @click="msgSetting(scope.row)">推送信息设置</a> | 
                                        <a class="timinga" href="javascript:void(0)" @click="preview(scope.row)">预览</a> | 
                                        <a v-if="scope.row.status" class="timinga" href="javascript:void(0)" @click="openClose(scope.row)">关闭</a><a v-else class="timinga" href="javascript:void(0)" @click="openClose(scope.row)">开启</a> | 
                                        <a class="timinga" href="javascript:void(0)" @click="delTimingRule(scope.row,scope.$index)">删除</a>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="newRule">
                                <el-button @click="addTimingRule" v-loading="formloading">+新增一条推送规则</el-button>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="免打扰时段设置">
                            <div class="errmsgbox">
                                使用说明：<br>
                                1、免打扰时段主要是为了避免夜间睡觉时段给粉丝推送信息造成骚扰而设立的，当设置了免打扰时段，则该时段内不会向粉丝推送信息。场景举例：假设“粉丝关注定时推送”功能设置粉丝关注后“1小时”推送信息，张三23时30分关注公众号，如果没有设置“免打扰时段”，公众号会在凌晨00：30分给张三推送一条信息，如果设置了“0:00 ~ 0:59”免打扰时段，那么0时30分则不会向张三推送信息。（默认是全时段都推送信息）<br>
                                2、免打扰时段按中国北京时间执行推送，海外公众号请自行转换时间。
                            </div>

                            <el-checkbox-group class="checkboxWrap" v-model="checkList">
                                <el-checkbox
                                    class="checkboxItem"
                                    v-for="(v,i) in checkboxList" :key="i"
                                    :label="v">
                                    {{v}}时段（{{v}}:00~{{v}}:59）
                                </el-checkbox>
                            </el-checkbox-group>
                            <div class="checkboxBtn">
                                <el-button type="success" @click="timeSubmit('set')">确 定</el-button>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </el-tab-pane>
                <el-tab-pane label="多客服转接" name="second">
                    <el-tabs type="border-card" @tab-click="twoTabs">
                        <el-tab-pane label="按关键词接入多客服">
                            <div class="errmsgbox">
                                提示：<br>
                                1、本功能仅限已认证的公众号（订阅号、服务号）才能使用，使用前先在公众平台申请开通“客服功能”（操作引导：公众平台-&gt;功能-&gt;添加功能插件-&gt;客服功能）。<br>
                                2、创建客服、管理客服以及客服数据请到公众平台“客服功能”页面中操作与查看，客服人员接待粉丝对话咨询请<u>登录多客服系统</u>，进行回复。<br>
                                3、当粉丝接入多客服系统后，公众号原有的关键词回复、自动回复等信息不再弹出（仅针对已经接入客服系统的粉丝），会话结束后30分钟恢复正常。<br>
                                4、建议选择“按关键词接入多客服”，“全部对话接入多客服”选择关闭。
                            </div>

                            <div style="text-align:right;margin:20px 0">
                                <el-button><a target="_blank" href="https://mpkf.weixin.qq.com/">登录多客服系统-电脑端</a></el-button>
                                <el-button @click="openAllkefu_m">多客服系统-手机端</el-button>
                                <el-button icon="el-icon-circle-plus-outline" type="success" @click="accessKefuNew">创建关键词</el-button>
                            </div>

                            <el-table
                                :data="keysAccessKefu"
                                border
                                style="width: 100%">
                                <el-table-column
                                prop="key"
                                label="触发关键词"
                                width="280">
                                </el-table-column>
                                <el-table-column
                                prop="kefuName"
                                label="指定客服人员"
                                width="280">
                                </el-table-column>
                                <el-table-column
                                prop="second"
                                label="接入次数"
                                width="150">
                                </el-table-column>
                                <el-table-column
                                label="状态	"
                                width="150">
                                    <template slot-scope="scope">
                                        <font v-if="scope.row.status" color="green">开启中</font>
                                        <font v-else color="red">关闭中</font>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" min-width="310">
                                    <template slot-scope="scope">
                                        <a class="timinga" href="javascript:void(0)" @click="accessKefuEdit(scope.row)">修改</a> |
                                        <a v-if="scope.row.status" class="timinga" href="javascript:void(0)" @click="openCloseKefu(scope.row)">关闭</a><a v-else class="timinga" href="javascript:void(0)" @click="openCloseKefu(scope.row)">开启</a> | 
                                        <a class="timinga" href="javascript:void(0)" @click="delAccessRule(scope.row,scope.$index)">删除</a>
                                    </template>
                                </el-table-column>
                            </el-table>

                        </el-tab-pane>
                        <el-tab-pane label="全部对话接入多客服">
                            <div class="errmsgbox">
                                提示：<br>
                                1、本功能仅限已认证的公众号（订阅号、服务号）才能使用，使用前须在公众平台申请开通“客服功能”（操作引导：公众平台-&gt;功能-&gt;添加功能插件-&gt;客服功能）。<br>
                                2、创建客服、管理客服以及客服数据请到公众平台“客服功能”页面中操作与查看，客服人员接待粉丝对话咨询请<u>登录在线客服系统</u>，进行回复。<br>
                                3、当粉丝接入多客服系统后，公众号原有的关键词回复、自动回复等信息不再弹出（仅针对已经接入客服系统的粉丝），会话结束后30分钟恢复正常。<br>
                                4、建议选择“按关键词接入多客服”，“全部对话接入多客服”选择关闭。
                            </div>

                            <div style="margin:20px 0">
                                <span style="width:128px">功能状态：</span>
                                <el-select style="width:260px;margin-left:58px" v-model="isAllAccess">
                                    <el-option
                                        label="关闭"
                                        :value="false">
                                    </el-option>
                                    <el-option
                                        label="开启"
                                        :value="true">
                                    </el-option>
                                </el-select>
                            </div>

                            <div v-if="isAllAccess" style="margin-bottom:20px">
                                <span>指定分配客服帐号</span>
                                <el-select style="width:260px;margin:0 10px" v-model="appointKefu">
                                    <el-option
                                        label="不指定"
                                        value="不指定">
                                    </el-option>
                                    <el-option
                                    v-for="item in appointKefuOptions"
                                    :key="item.kefuid"
                                    :label="item.kefuName"
                                    :value="item.kefuid">
                                    </el-option>
                                </el-select>
                                <span style="color: #999;font-size: 12px;">非必填项，如须指定分配才填写</span>
                            </div>

                            <div class="checkboxBtn">
                                <el-button @click="setAllInsertStatus" type="success">保 存</el-button>
                            </div>

                        </el-tab-pane>
                    </el-tabs>
                </el-tab-pane>
                <el-button type="primary" class="fanhuiBtn" @click="toPubliclist">返回</el-button>
            </el-tabs>
        </el-card>

        <!-- 编辑对话框 -->
		<el-dialog title="修改" :visible.sync="dialogFormVisible" width="50%">
			<el-form :model="form" v-loading="formloading">
				<el-form-item label="规则重命名" label-width="200px">
					<el-input v-model="form.rule" autocomplete="off" style="width:200px"></el-input>
				</el-form-item>
                <div class="errmsgbox" style="margin:10px 20px;">提示：粉丝关注后多长时间推送（最小值不能低于0秒、最大值不能超过48小时）。</div>
				<el-form-item label="粉丝关注后多长时间推送" label-width="200px">
					<el-input v-model="form.howTime" autocomplete="off" style="width:80px;margin-right:10px"></el-input>
                    <el-select v-model="sOrmOrh" placeholder="请选择" style="width:100px">
                        <el-option label="小时" value="小时"></el-option>
                        <el-option label="分钟" value="分钟"></el-option>
                        <el-option label="秒钟" value="秒钟"></el-option>
                    </el-select>
				</el-form-item>
				<el-form-item label="成功推送条数" label-width="200px">
					<el-input v-model="form.successStrip" autocomplete="off" disabled style="width:80px;margin-right:10px"></el-input>
                    <el-button type="primary" @click="form.successStrip = 0">清 空</el-button>
				</el-form-item>
				<el-form-item label="待发送任务数" label-width="200px">
					<el-input v-model="form.taskNumber" autocomplete="off" disabled style="width:80px;margin-right:10px"></el-input>
                    <el-button type="primary" @click="form.taskNumber = 0">清 空</el-button>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="toRevise">确 定</el-button>
			</div>
		</el-dialog>
        <!-- 预览对话框 -->
        <el-dialog title="预览" :visible.sync="dialogPreviewVisible" width="35%" top="20vh">
            <qrcode-vue class="qrcode" :value="qrcode" size="240" level="H"></qrcode-vue>
            <div class="errmsgbox"><strong>操作步骤：</strong><br>微信扫一扫上面的二维码，关注公众号后，向公众号发送下面的字符进行预览</div>
            <div style="border:2px #FC0 dotted;font-size:36px;background:#44B549;line-height:60px;text-align:center;color:#FFF;margin-top: 10px">{{previewStr}}</div>
        </el-dialog>
        <!-- 推送信息设置对话框 -->
        <el-dialog title="信息设置" @close="getList" :visible.sync="dialogMsgSet" width="1000px">
            <el-tabs type="border-card" @tab-click="pushMsgSet" v-model="msg_setwai">
                <el-tab-pane label="不弹出信息【默认】" name="default">
                    <div class="errmsgbox">提示：<br>1、不弹出信息：等于功能处在关闭状态。<br>2、自定义弹出信息：弹出的信息内容请自定义设置。</div>
                </el-tab-pane>
                <el-tab-pane label="自定义弹出信息【推荐】" name="recommend">
                    <div class="errmsgbox">提示：自定义弹出信息，信息内容不能为空，需要保存提交后才生效！</div>

                    <el-tabs type="border-card" v-model="msg_setnei">
                        <el-tab-pane label="文本信息" name="1">
                            <el-input
                                type="textarea"
                                :rows="8"
                                placeholder="请输入内容"
                                v-model="timingTextarea">
                            </el-input>

                            <el-link icon="el-icon-link" style="margin-right:30px" @click="dialoghuihua = true">插入链接/会话</el-link>
                            <el-link icon="el-icon-user" @click="dialogopenid = true">粉丝昵称/头像/openid</el-link>
                            <div style="background: #F4F5F9;text-align:center;padding:10px 0">
                                <el-button type="success" @click="timingTextSubmit" size="small">保 存</el-button>
                            </div>

                        </el-tab-pane>
                        <el-tab-pane label="单图文" name="2">
                            <div style="vertical-align: top;width: 300px;display: inline-block;border: 1px #e7e7eb solid;padding:10px">
                                <h1>{{fansSingleTextform.title}}</h1>
                                <img style="float: right;width:100px;height:100px" :src="fansSingleTextform.imgUrl">
                                <p>{{fansSingleTextform.description}}</p>
                            </div>
                            <el-form :model="fansSingleTextform" label-width="120px" style="width: 400px;display: inline-block;">
                                <el-form-item label="标题：">
                                    <el-input v-model="fansSingleTextform.title"></el-input>
                                </el-form-item>
                                <el-form-item label="封面图片URL：" style="margin-bottom: 0px;">
                                    <el-input v-model="fansSingleTextform.imgUrl"></el-input>
                                </el-form-item>
                                <el-button 
                                    type="success" 
                                    size="small" 
                                    @click="dialogimgUpFun"
                                    style="margin:0 20px 20px;">
                                    上传图片
                                </el-button>
                                <el-form-item label="描述：">
                                    <el-input type="textarea" :rows="4" v-model="fansSingleTextform.description"></el-input>
                                </el-form-item>
                                <el-form-item label="链接URL：">
                                    <el-input v-model="fansSingleTextform.link"></el-input>
                                </el-form-item>
                            </el-form>

                            <div style="background: #F4F5F9;text-align:center;padding:10px 0">
                                <el-button @click="timingSingletextSubmit" type="success" size="small">保 存</el-button>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="图片" name="3">
                            <div style="display:inline-block;width:300px;height:220px">
                                <img :src="currentImg" style="width:100%;height:100%">
                            </div>
                            <div style="vertical-align: top;display:inline-block;width:300px;height:60px;padding:80px 60px">
                                <el-button @click="getPublicImg" type="primary" icon="el-icon-circle-plus-outline">选择图片</el-button>
                                <p>上传图片，请到公众号素材管理中上传</p>
                            </div>
                            <div style="background: #F4F5F9;text-align:center;padding:10px 0">
                                <el-button @click="timingPublicImgSubmit" type="success" size="small">保 存</el-button>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="语音" name="4">
                            <h3>选取的语音media_id：{{mediaVoice_id}}</h3>
                            <div style="text-align: center;vertical-align: top;height:60px;padding:60px 60px">
                                <el-button @click="getPublicVoice" type="primary" icon="el-icon-circle-plus-outline">选择语音</el-button>
                                <p>上传语音，请到公众号素材管理中上传</p>
                            </div>
                            <div style="background: #F4F5F9;text-align:center;padding:10px 0">
                                <el-button @click="timingPublicVoiceSubmit" type="success" size="small">保 存</el-button>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="视频" name="5">
                            <h3>视频主题：<a :href="videoUrl" target="_blank" rel="noopener noreferrer">{{videoName}}</a></h3>
                            <h3>视频media_id:{{mediaVideo_id}}</h3>
                            <div style="text-align: center;vertical-align: top;height:60px;padding:60px 60px">
                                <el-button @click="getPublicVideo" type="primary" icon="el-icon-circle-plus-outline">选择视频</el-button>
                                <p>上传视频，请到公众号素材管理中上传</p>
                            </div>
                            <div style="background: #F4F5F9;text-align:center;padding:10px 0">
                                <el-button @click="timingPublicVideoSubmit" type="success" size="small">保 存</el-button>
                            </div>
                        </el-tab-pane>
                    </el-tabs>

                </el-tab-pane>
            </el-tabs>
        </el-dialog>
        <!-- 接入会话链接对话框 -->
        <el-dialog title="接入会话/链接" :visible.sync="dialoghuihua" width="800px">
            <el-tabs type="border-card">
                <el-tab-pane label="接入链接">
                    <el-form :model="formLink">
                        <el-form-item label="网址链接" label-width="100px">
                            <el-input v-model="formLink.link" style="min-width:400px" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="链接锚文本" label-width="100px">
                            <el-input v-model="formLink.text" style="min-width:400px" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div>生成后的代码：</div>
                    <div style="padding:10px 0 20px;text-align:center">
                        &lt;a href="{{formLink.link}}"&gt;{{formLink.text}}&lt;/a&gt;
                    </div>
                    <div style="padding:10px 0 0;text-align:center">
                        <el-button type="success" size="small" @click="copyLink1">复制代码</el-button>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="接入会话">
                    <el-form :model="formSession">
                        <el-form-item label="会话字符" label-width="100px">
                            <el-input v-model="formSession.str" style="min-width:400px" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div>生成后的代码：</div>
                    <div style="padding:10px 0 20px;text-align:center">
                        &lt;a href="weixin://bizmsgmenu?msgmenucontent={{formSession.str}}&msgmenuid=100"&gt;{{formSession.str}}&lt;/a&gt;
                    </div>
                    <div style="padding:10px 0 0;text-align:center">
                        <el-button type="success" size="small" @click="copyLink2">复制代码</el-button>
                    </div>
                </el-tab-pane>
            </el-tabs>

        </el-dialog>
        <!-- 粉丝昵称/头像/openid对话框 -->
        <el-dialog title="粉丝昵称/头像/openid" :visible.sync="dialogopenid" width="800px">
            <el-form :model="formOpenid">
                <el-form-item label="粉丝的昵称" label-width="110px">
                    <el-input v-model="formOpenid.name" style="width:200px" autocomplete="off"></el-input>
                    <el-button type="success" size="small" @click="copy(formOpenid.name)">复制代码</el-button>
                </el-form-item>
                <el-form-item label="粉丝的头像url" label-width="110px">
                    <el-input v-model="formOpenid.head" style="width:200px" autocomplete="off"></el-input>
                    <el-button type="success" size="small" @click="copy(formOpenid.head)">复制代码</el-button>
                </el-form-item>
                <el-form-item label="粉丝的openid" label-width="110px">
                    <el-input v-model="formOpenid.openid" style="width:200px" autocomplete="off"></el-input>
                    <el-button type="success" size="small" @click="copy(formOpenid.openid)">复制代码</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 图片上传对话框 -->
        <el-dialog title="图片上传" :visible.sync="dialogimgUp" width="800px">
            <el-upload
                class="upload-demo"
                action="http://agent.zhongkebang.com/updatePhoto"
                :data="{appId}"
                :show-file-list="false"
                :before-upload="filebefUpload"
                :on-success="fileSuccess">
                <el-button size="small" type="primary">上传图片</el-button>
                <span slot="tip" class="el-upload__tip">上传文件，不超过400kb</span>
            </el-upload>
            <el-table
                :data="myimgTableData"
                border
                style="width: 100%;margin-top:20px">
                <el-table-column
                    type="index"
                    label="编号"
                    width="50">
                </el-table-column>
                <el-table-column
                    label="图片">
                    <template slot-scope="scope">
                        <img @click="selectOneImg(scope.row)" style="cursor: pointer;width:200px;height:120px" :src="scope.row.imgUrl">
                    </template>
                </el-table-column>
                <el-table-column
                    prop="date"
                    label="上传日期">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        @click="delMyimg(scope.$index,scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <!-- 获取公众号素材图片对话框 -->
        <el-dialog title="获取公众号素材图片" :visible.sync="dialogPublicImg" width="800px">
            <div class="errmsgbox" id="err1">提示：以下内容来自于公众号素材管理中的图片，如需上传图片，请到公众号素材管理中上传。</div>

            <div class="publicImg" v-for="(v,i) in publicImgList" :key="i" @click="selectPubImg(v)">
                <img :src="v.url">
                <h2>{{v.name}}</h2>
                <p>{{v.update_time}}</p>
            </div>   
        </el-dialog>
        <!-- 获取公众号语音素材对话框 -->
        <el-dialog title="获取公众号素材图片" :visible.sync="dialogPublicVoice" width="800px">
            <div class="errmsgbox" id="err1">提示：以下内容来自于公众号素材管理中的语音，如需上传语音，请到公众号素材管理中操作。</div>

            <el-table
                :data="tablePublicVoice"
                border
                style="width: 100%">
                <el-table-column
                    prop="name"
                    label="语音主题"
                    width="440">
                </el-table-column>
                <el-table-column
                    prop="time"
                    label="上传时间"
                    width="200">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        type="success"
                        @click="selectionVoice(scope.row)">选取</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <!-- 获取公众号视频素材对话框 -->
        <el-dialog title="获取公众号素材图片" :visible.sync="dialogPublicVideo" width="800px">
            <div class="errmsgbox" id="err1">提示：以下内容来自于公众号素材管理中的视频，如需上传视频，请到公众号素材管理中操作。</div>

            <el-table
                :data="tablePublicVideo"
                border
                style="width: 100%">
                <el-table-column
                    prop="name"
                    label="语音主题"
                    width="440">
                </el-table-column>
                <el-table-column
                    prop="time"
                    label="上传时间"
                    width="200">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        type="success"
                        @click="selectionVideo(scope.row)">选取</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <!-- 关键词客服转接对话框 -->
        <el-dialog @close="closeDialogKeysSet" title="关键词信息设置" :visible.sync="dialogKeysSet" width="1000px" top="8vh">
            <el-form :model="formKeysSet" label-width="180px" size="mini">
                <el-form-item label="*触发关键词">
                    <el-input v-model="formKeysSet.name" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="*匹配模式">
                    <el-radio v-model="formKeysSet.pattern" label="1">精准</el-radio>
                    <el-radio v-model="formKeysSet.pattern" label="2">模糊/包含</el-radio>
                </el-form-item>
                <el-form-item label="分配指定客服">
                    <el-select v-model="formKeysSet.kefuid" style="width:300px">
                        <el-option
                            label="不指定"
                            value="不指定">
                        </el-option>
                        <el-option
                            v-for="item in appointKefuOptions"
                            :key="item.kefuid"
                            :label="item.kefuName"
                            :value="item.kefuid">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="粉丝打/取消标签">
                    <el-select v-model="formKeysSet.isLabel" style="width:110px;margin-right:10px">
                        <el-option label="打标签" value="打标签"></el-option>
                        <el-option label="取消标签" value="取消标签"></el-option>
                        <el-option label="不设置" value="不设置"></el-option>
                    </el-select>
                    
                    <el-select v-if="formKeysSet.isLabel != '不设置'" v-model="formKeysSet.grouping" style="width:180px">
                        <el-option
                            v-for="(v,i) in groupingList"
                            :key="i.kefuid"
                            :label="v.value"
                            :value="v.label">
                        </el-option>
                    </el-select>
                    <p style="color: #999;font-size: 12px;">用途：当粉丝向公众号回复该关键词时，系统自动把粉丝打上标签或者取消标签，标签数据与公众号实时同步</p>
                </el-form-item>
            </el-form>

            <div><font color="red">*</font>接入客服系统时向粉丝发送的提示信息</div>
            <el-tabs type="border-card">
                <el-tab-pane label="文本信息">
                    <el-input
                        type="textarea"
                        :rows="8"
                        placeholder="请输入内容"
                        v-model="timingTextarea">
                    </el-input>

                    <el-link icon="el-icon-link" style="margin-right:30px" @click="dialoghuihua = true">插入链接/会话</el-link>
                    <el-link icon="el-icon-user" @click="dialogopenid = true">粉丝昵称/头像/openid</el-link>
                    <div style="background: #F4F5F9;text-align:center;padding:10px 0">
                        <el-button @click="keysReplyTotext" type="success" size="small">保 存</el-button>
                    </div>

                </el-tab-pane>
                <el-tab-pane label="单图文">
                    <div style="vertical-align: top;width: 300px;display: inline-block;border: 1px #e7e7eb solid;padding:10px">
                        <h1>{{fansSingleTextform.title}}</h1>
                        <img style="float: right;width:100px;height:100px" :src="fansSingleTextform.imgUrl">
                        <p>{{fansSingleTextform.description}}</p>
                    </div>
                    <el-form :model="fansSingleTextform" label-width="120px" style="width: 400px;display: inline-block;">
                        <el-form-item label="标题：">
                            <el-input v-model="fansSingleTextform.title"></el-input>
                        </el-form-item>
                        <el-form-item label="封面图片URL：" style="margin-bottom: 0px;">
                            <el-input v-model="fansSingleTextform.imgUrl"></el-input>
                        </el-form-item>
                        <el-button 
                            type="success" 
                            size="small" 
                            @click="dialogimgUpFun"
                            style="margin:0 20px 20px;">
                            上传图片
                        </el-button>
                        <el-form-item label="描述：">
                            <el-input type="textarea" :rows="4" v-model="fansSingleTextform.description"></el-input>
                        </el-form-item>
                        <el-form-item label="链接URL：">
                            <el-input v-model="fansSingleTextform.link"></el-input>
                        </el-form-item>
                    </el-form>

                    <div style="background: #F4F5F9;text-align:center;padding:10px 0">
                        <el-button @click="keysReplyToSingletext" type="success" size="small">保 存</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="图片">
                    <div style="display:inline-block;width:300px;height:220px">
                        <img :src="currentImg" style="width:100%;height:100%">
                    </div>
                    <div style="vertical-align: top;display:inline-block;width:300px;height:60px;padding:80px 60px">
                        <el-button @click="getPublicImg" type="primary" icon="el-icon-circle-plus-outline">选择图片</el-button>
                        <p>上传图片，请到公众号素材管理中上传</p>
                    </div>
                    <div style="background: #F4F5F9;text-align:center;padding:10px 0">
                        <el-button @click="keysReplyToPublicImg" type="success" size="small">保 存</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="语音">
                    <h3>选取的语音media_id：{{mediaVoice_id}}</h3>
                    <div style="text-align: center;vertical-align: top;height:60px;padding:60px 60px">
                        <el-button @click="getPublicVoice" type="primary" icon="el-icon-circle-plus-outline">选择语音</el-button>
                        <p>上传语音，请到公众号素材管理中上传</p>
                    </div>
                    <div style="background: #F4F5F9;text-align:center;padding:10px 0">
                        <el-button @click="keysReplyToPublicVoice" type="success" size="small">保 存</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="视频">
                    <h3>视频主题：<a :href="videoUrl" target="_blank" rel="noopener noreferrer">{{videoName}}</a></h3>
                    <h3>视频media_id:{{mediaVideo_id}}</h3>
                    <div style="text-align: center;vertical-align: top;height:60px;padding:60px 60px">
                        <el-button @click="getPublicVideo" type="primary" icon="el-icon-circle-plus-outline">选择视频</el-button>
                        <p>上传视频，请到公众号素材管理中上传</p>
                    </div>
                    <div style="background: #F4F5F9;text-align:center;padding:10px 0">
                        <el-button @click="keysReplyToPublicVideo" type="success" size="small">保 存</el-button>
                    </div>
                </el-tab-pane>
            </el-tabs>

        </el-dialog>
    </div>
</template>

<script>
import QrcodeVue from 'qrcode.vue'
export default {
    components: {
        QrcodeVue,
    },
    data() {
        return {
            activeName:'first',
            appId:'',
            timingTableData:[],
            // 编辑对话框
            dialogFormVisible:false,
            // 预览对话框
            dialogPreviewVisible:false,
            // 推送信息设置对话框
            dialogMsgSet:false,
            // 接入会话链接对话框
            dialoghuihua:false,
            // 粉丝昵称/头像/openid对话框
            dialogopenid:false,
            // 图片上传对话框
            dialogimgUp:false,
            // 获取公众号素材图片对话框
            dialogPublicImg:false,
            // 获取公众号语音素材对话框
            dialogPublicVoice:false,
            // 获取公众号视频素材对话框
            dialogPublicVideo:false,
            // 关键词客服转接对话框
            dialogKeysSet:false,
            formloading:false,
            form:{},
            sOrmOrh:'',
            // 当前可用条数
            usableStrip:'596',
            // 已用条数
            usedStrip:'4',
            // 预览的二维吗
            qrcode:'',
            // 预览的字符
            previewStr:'',
            checkList: [],
            checkboxList:['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23'],
            // 接入链接表单数据
            formLink:{
                link:'http://www.baidu.com',
                text:'点击文字跳转百度首页'
            },
            // 定时文本信息
            timingTextarea:'',
            // 会话字符表单数据
            formSession:{
                str:'会话测试'
            },
            //粉丝昵称/头像/openid对话框表单数据
            formOpenid:{
                name:'{@nickname}',
                head:'{@headimgurl}',
                openid:'{@openid}'
            },
            //粉丝单图文表单数据
            fansSingleTextform:{
                title:'',
                imgUrl:'',
                description:'',
                link:''
            },
            // 我的图片列表
            myimgTableData:[],
            //选择的图片(公众号素材管理中上传的图片)
            currentImg:'',
            currentImgId:'',
            //公众号素材管理中上传的图片)
            publicImgList:[],
            // 公众号语音素材列表
            tablePublicVoice:[],
            // 选取的语音media_id
            mediaVoice_id:'',
            // 公众号视频素材列表
            tablePublicVideo:[],
            // 选取的视频media_id
            mediaVideo_id:'',
            // 选取的视频url
            videoUrl:'',
            // 选取的视频主题
            videoName:'',
            // 是否全部对话接入多客服
            isAllAccess:'false',
            // 指定分配客服帐号
            appointKefu:'不指定',
            // 客服列表
            appointKefuOptions:[],
            // 分组列表数据
            groupingList:[],
            // 按关键词接入多客服 关键词列表
            keysAccessKefu:[],
            // 关键词信息设置表单数据
            formKeysSet:{
                name:'',
                pattern:'1',
                kefuid:'不指定',
                isLabel:'打标签',
                grouping:'选项1'
            },
            // 打开推送信息设置窗口后保存规则id
            msgRuleId:'',
            // 客服关键字回复修改还是新增
            kefukeysType:'',
            msg_setwai:'default',
            msg_setnei:'1'
        }
    },
    methods:{
        toPubliclist(){ // 返回公众号首页
            this.$router.push('/Public/Publiclist')
        },
        messageEdit(row){ // 打开编辑弹框
            this.dialogFormVisible = true;
            this.form = Object.assign({}, row);
            this.sOrmOrh = this.form.howTime.substr(-2,2);
            this.form.howTime = parseInt(this.form.howTime);
        },
        toRevise(){ // 提交编辑弹框的内容
            this.form.howTime+=this.sOrmOrh;
            // console.log(this.form)
            this.formloading = true;
            this.$http.post('setTimingMessage',{appId:this.appId,ruleForm:this.form}).then((data)=>{
                var num = data.data.msg.length;
                if(data.data.success){
					if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'success',
						offset:'65',
						duration:1000
                    });
                    this.getList();
                }else{
                    if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'error',
						offset:'65',
						duration:1000
					});
                }
                this.dialogFormVisible = false;
                this.formloading = false;
            })
        },
        getList(){ //获取粉丝关注定时推送信息规则列表
            this.$http.post('getTimingMessageList',{appId:this.appId}).then((data)=>{
                var num = data.data.msg.length;
                if(data.data.success){
                    this.timingTableData = data.data.data.tableData;
                    this.usableStrip = data.data.data.usableStrip;
                    this.usedStrip = data.data.data.usedStrip;
                }else{
                    if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'error',
						offset:'65',
						duration:1000
					});
                }
            })
        },
        addTimingRule(){ //添加一条规则
            this.formloading = true;
            this.$http.post('addTimingRule',{appId:this.appId}).then((data)=>{
                var num = data.data.msg.length;
                if(data.data.success){
                    if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'success',
						offset:'65',
						duration:1500
                    });
                    this.getList();
                }else{
                    if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'error',
						offset:'65',
						duration:1000
					});
                }
                this.formloading = false;
            })
        },
        preview(row){// 预览
            this.dialogPreviewVisible = true;
            this.$http.post('getPreview',{appId:this.appId,ruleId:row.id}).then((data)=>{
                var num = data.data.msg.length;
                if(data.data.success){
                    this.qrcode = data.data.data.qrcode;
                    this.previewStr = data.data.data.previewStr;
                }else{
                    if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'error',
						offset:'65',
						duration:1000
					});
                }
            })
        },
        tabsTiming(tabs){ // 切换到免打扰时段设置
            if(tabs.index === '1' ){
                this.timeSubmit('get');
            }
        },
        timeSubmit(type){ // 提交免打扰时段设置
            this.$http.post('disturbTimeSetting',{appId:this.appId,type,timeList:this.checkList}).then((data)=>{
                var num = data.data.msg.length;
                if(data.data.success){
					if ( num>1 && type == 'set' ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'success',
						offset:'65',
						duration:1000
                    });
                    this.checkList = data.data.data.checkList;
                }else{
                    if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'error',
						offset:'65',
						duration:1000
					});
                }
            })
        },
        openClose(row){ // 开启关闭定时推送规则
            row.status = !row.status;
            let text = row.status?'已开启':'已关闭';
            this.$http.post('setTimingMsgStatus',{appId:this.appId,status:row.status,ruleId:row.id}).then((data)=>{
                var num = data.data.msg.length;
                if(data.data.success){
					this.$message({
						showClose: true,
						message: text,
						type: 'success',
						offset:'65',
						duration:1000
                    });
                }else{
                    if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'error',
						offset:'65',
						duration:1000
					});
                }
            })
        },
        delTimingRule(v,i){ // 删除一条定时推送规则
            // console.log(v,i)
            this.$confirm('确定要删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.post('delTimingRule',{appId:this.appId,ruleId:v.id}).then((data)=>{
                    var num = data.data.msg.length;
                    if(data.data.success){
                        this.timingTableData.splice(i, 1);
                        this.$message({
                            showClose: true,
                            message: data.data.msg,
                            type: 'success',
                            offset:'65',
                            duration:1000
                        });
                    }else{
                        if ( num>1 ) this.$message({
                            showClose: true,
                            message: data.data.msg,
                            type: 'error',
                            offset:'65',
                            duration:1000
                        });
                    }
                })
            }).catch(() => {});
        },
        msgSetting(row){  // 打开推送信息设置窗口
            this.dialogMsgSet = true;
            this.msgRuleId = row.id;
            this.$http.post('getTimingMsg',{appId:this.appId,ruleId:row.id}).then((data)=>{
                var num = data.data.msg.length;
                if(data.data.success){
                    if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'success',
						offset:'65',
						duration:1500
                    });
                    if(data.data.data.type == 1){
                        this.timingTextarea = data.data.data.content;
                    }
                    this.msg_setwai = "recommend";
                    this.msg_setnei = data.data.data.type + ''
                }else{
                    if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'error',
						offset:'65',
						duration:1000
					});
                }
            })
        },
        copy(str){  //复制
            var save = function (e){
                e.clipboardData.setData('text/plain',str);//clipboardData对象
                e.preventDefault();//阻止默认行为
            };
            document.addEventListener('copy',save);
            return document.execCommand("copy");//使文档处于可编辑状态，否则无效
        },
        copyLink1(){ //复制
            var str = '<a href="'+this.formLink.link+'">'+this.formLink.text+'</a>';
            this.copy(str)
        },
        copyLink2(){ //复制
            var str = '<a href="weixin://bizmsgmenu?msgmenucontent='+this.formSession.str+'&msgmenuid=100">'+this.formSession.str+'</a>';
            this.copy(str)
        },
        pushMsgSet(tabs){  // 切换tabs
            if(tabs.index == '0'){
                this.$confirm('确定设置“不弹出信息”吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.post('setTimingMsgStatus',{appId:this.appId,status:false,ruleId:this.msgRuleId}).then((data)=>{
                        var num = data.data.msg.length;
                        if(data.data.success){
                            this.$alert('操作成功！', '信息', {
                                confirmButtonText: '确定'
                            });
                        }else{
                            if ( num>1 ) this.$message({
                                showClose: true,
                                message: data.data.msg,
                                type: 'error',
                                offset:'65',
                                duration:1000
                            });
                        }
                    })
                }).catch(() => {});
            }
        },
        filebefUpload(file){ //图片上传前检查大小
            if(file.size > 409600){
                this.$message({
                    showClose: true,
                    message: '图片大小超过400kb，请重新选择',
                    type: 'error',
                    offset:'65',
                    duration:1500
                });
                return false
            }
        },
        fileSuccess(response, file, fileList){  // 图片上传成功
            if(response.success){
                this.$alert('图片上传成功', '', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.dialogimgUp = false;
                        this.fansSingleTextform.imgUrl = response.data.imgUrl;
                    }
                });
            }else{
                this.$message({
                    showClose: true,
                    message: data.data.msg,
                    type: 'error',
                    offset:'65',
                    duration:1500
                });
            }
        },
        selectOneImg(row){ //点击自己上传的图片选择
            this.dialogimgUp = false;
            this.fansSingleTextform.imgUrl = row.imgUrl;
        },
        delMyimg(index,row){ //删除一个自己上传的图片
            this.$confirm('确定删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {  //点击确定了
                this.myimgTableData.splice(index, 1);
                // this.$message({
                //     type: 'success',
                //     message: '删除成功!'
                // });
            }).catch(() => {  //点击取消了
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        selectPubImg(v){ //选择公众号素材图片
            this.currentImg = v.url;
            this.currentImgId = v.media_id;
            this.dialogPublicImg = false;
        },
        selectionVoice(row){//选择公众号语音素材
            this.dialogPublicVoice = false;
            this.mediaVoice_id = row.media_id;
        },
        selectionVideo(row){//选择公众号视频素材
            this.dialogPublicVideo = false;
            this.mediaVideo_id = row.media_id;
            this.videoUrl = row.videoUrl;
            this.videoName = row.name;
        },
        openAllkefu_m(){//多客服系统-手机端
            this.$alert('手机下载并安装腾讯开发的“订阅号助手”APP，各大应用市场均可下载。注意：虽然APP名称叫“订阅号助手”，但是服务号也是可以使用的。', '信息', {
                confirmButtonText: '确定'
            });
        },
        openCloseKefu(row){ // 开启关闭客服关键字回复
            row.status = !row.status;
            let text = row.status?'已开启':'已关闭';
            this.$http.post('setKefuKeysStatus',{appId:this.appId,status:row.status,ruleId:row.id}).then((data)=>{
                var num = data.data.msg.length;
                if(data.data.success){
					this.$message({
						showClose: true,
						message: text,
						type: 'success',
						offset:'65',
						duration:1000
                    });
                }else{
                    if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'error',
						offset:'65',
						duration:1000
					});
                }
            })
        },
        delAccessRule(v,i){ //删除客服关键字回复
            this.$confirm('确定要删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.post('delKefuKeysRule',{appId:this.appId,ruleId:v.id}).then((data)=>{
                    var num = data.data.msg.length;
                    if(data.data.success){
                        this.keysAccessKefu.splice(i, 1);
                        this.$message({
                            showClose: true,
                            message: data.data.msg,
                            type: 'success',
                            offset:'65',
                            duration:1000
                        });
                    }else{
                        if ( num>1 ) this.$message({
                            showClose: true,
                            message: data.data.msg,
                            type: 'error',
                            offset:'65',
                            duration:1000
                        });
                    }
                })
            }).catch(() => {});
        },
        accessKefuEdit(row){ // 关键词接入多客服 打开修改对话框
            this.msgRuleId = row.id;
            this.dialogKeysSet = true;
            this.formKeysSet.name = row.key;
            this.formKeysSet.kefuid = row.kefuid;
            this.kefukeysType = 'set';
            this.getKeAndGroupList()
        },
        accessKefuNew(){
            this.msgRuleId = '';
            this.kefukeysType = 'new';
            this.dialogKeysSet = true;
            this.getKeAndGroupList()
        },
        closeDialogKeysSet(){ // 关闭 关键词客服转接对话框
            this.formKeysSet = {
                name:'',
                pattern:'1',
                kefuid:'不指定',
                isLabel:'打标签',
                grouping:'选项1'
            }
        },
        timingTextSubmit(){ //定时推送自定义弹出信息设置为文本信息
            if(this.timingTextarea == ''){
                this.$message({
                    showClose: true,
                    message: '内容不能为空',
                    type: 'info',
                    offset:'65',
                    duration:1000
                })
                return
            }
            this.$http.post('setTimingMsgTotext',{appId:this.appId,content:this.timingTextarea,ruleId:this.msgRuleId}).then((data)=>{
                var num = data.data.msg.length;
                if(data.data.success){
					if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'success',
						offset:'65',
						duration:1000
                    });
                }else{
                    if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'error',
						offset:'65',
						duration:1000
					});
                }
            })
        },
        dialogimgUpFun(){ //获取自己上传的图片
            this.dialogimgUp = true;
            this.$http.post('getUpdateImg',{appId:this.appId}).then((data)=>{
                var num = data.data.msg.length;
                if(data.data.success){
                    this.myimgTableData = data.data.data.tableData;
                }else{
                    if ( num>1 ) this.$message({
                        showClose: true,
                        message: data.data.msg,
                        type: 'error',
                        offset:'65',
                        duration:1000
                    });
                }
            })
        },
        timingSingletextSubmit(){//定时推送自定义弹出信息设置为单图文
            if(this.fansSingleTextform.title == '' || this.fansSingleTextform.imgUrl == '' ||this.fansSingleTextform.description == '' || this.fansSingleTextform.link == '' ){
                this.$message({
                    showClose: true,
                    message: '内容不能为空',
                    type: 'info',
                    offset:'65',
                    duration:1000
                })
                return
            }
            this.$http.post('setTimingMsgToSingletext',{appId:this.appId,form:this.fansSingleTextform,ruleId:this.msgRuleId}).then((data)=>{
                var num = data.data.msg.length;
                if(data.data.success){
					if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'success',
						offset:'65',
						duration:1000
                    });
                }else{
                    if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'error',
						offset:'65',
						duration:1000
					});
                }
            })
        },
        getPublicImg(){//获取公众号素材管理中心的图片
            this.dialogPublicImg = true;
            this.$http.post('getPublicImg',{appId:this.appId}).then((data)=>{
                var num = data.data.msg.length;
                if(data.data.success){
                    this.publicImgList = data.data.data.publicImgList;
                }else{
                    if ( num>1 ) this.$message({
                        showClose: true,
                        message: data.data.msg,
                        type: 'error',
                        offset:'65',
                        duration:1000
                    });
                }
            })
        },
        timingPublicImgSubmit(){ //自定义弹出信息设置为素材管理中心的图片
            if(this.currentImg == ''){
                this.$message({
                    showClose: true,
                    message: '还没有选择图片',
                    type: 'info',
                    offset:'65',
                    duration:1000
                })
                return
            }
            this.$http.post('setTimingMsgToPublicImg',{appId:this.appId,url:this.currentImg,ruleId:this.msgRuleId}).then((data)=>{
                var num = data.data.msg.length;
                if(data.data.success){
					if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'success',
						offset:'65',
						duration:1000
                    });
                }else{
                    if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'error',
						offset:'65',
						duration:1000
					});
                }
            })
        },
        getPublicVoice(){//获取公众号素材管理中心的语音
            this.dialogPublicVoice = true;
            this.$http.post('getPublicVoice',{appId:this.appId}).then((data)=>{
                var num = data.data.msg.length;
                if(data.data.success){
                    this.tablePublicVoice = data.data.data.tablePublicVoice;
                }else{
                    if ( num>1 ) this.$message({
                        showClose: true,
                        message: data.data.msg,
                        type: 'error',
                        offset:'65',
                        duration:1000
                    });
                }
            })
        },
        timingPublicVoiceSubmit(){//自定义弹出信息设置为素材管理中心的语音
            if(this.mediaVoice_id == ''){
                this.$message({
                    showClose: true,
                    message: '还没有选择语音',
                    type: 'info',
                    offset:'65',
                    duration:1000
                })
                return
            }
            this.$http.post('setTimingMsgToPublicVoice',{appId:this.appId,media_id:this.mediaVoice_id,ruleId:this.msgRuleId}).then((data)=>{
                var num = data.data.msg.length;
                if(data.data.success){
					if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'success',
						offset:'65',
						duration:1000
                    });
                }else{
                    if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'error',
						offset:'65',
						duration:1000
					});
                }
            })
        },
        getPublicVideo(){//获取公众号素材管理中心的视频
            this.dialogPublicVideo = true;
            this.$http.post('getPublicVideo',{appId:this.appId}).then((data)=>{
                var num = data.data.msg.length;
                if(data.data.success){
                    this.tablePublicVideo = data.data.data.tablePublicVideo;
                }else{
                    if ( num>1 ) this.$message({
                        showClose: true,
                        message: data.data.msg,
                        type: 'error',
                        offset:'65',
                        duration:1000
                    });
                }
            })
        },
        timingPublicVideoSubmit(){//自定义弹出信息设置为素材管理中心的视频
            if(this.videoName == ''){
                this.$message({
                    showClose: true,
                    message: '还没有选择视频',
                    type: 'info',
                    offset:'65',
                    duration:1000
                })
                return
            }
            this.$http.post('setTimingMsgToPublicVideo',{appId:this.appId,media_id:this.mediaVideo_id,ruleId:this.msgRuleId}).then((data)=>{
                var num = data.data.msg.length;
                if(data.data.success){
					if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'success',
						offset:'65',
						duration:1000
                    });
                }else{
                    if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'error',
						offset:'65',
						duration:1000
					});
                }
            })
        },
        oneTabs(tabs){ //一级tabs切换
            if(tabs.index == '1'){
                this.getKeysList()
            }
        },
        getKeysList(){ //获取按关键词接入多客服规则列表
            this.$http.post('getKeysList',{appId:this.appId}).then((data)=>{
                var num = data.data.msg.length;
                if(data.data.success){
                    this.keysAccessKefu = data.data.data.keysAccessKefu;
                }else{
                    if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'error',
						offset:'65',
						duration:1000
					});
                }
            })
        },
        getKeAndGroupList(){ //获取客服列表和分组列表
            this.$http.post('getKeAndGroupList',{appId:this.appId}).then((data)=>{
                var num = data.data.msg.length;
                if(data.data.success){
                    this.appointKefuOptions = data.data.data.kefuList;
                    this.groupingList = data.data.data.groupList;
                }else{
                    if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'error',
						offset:'65',
						duration:1000
					});
                }
            })
        },
        keysReplyTotext(){ //新增或修改一条规则用文本信息回复
            if(this.timingTextarea == '' || this.formKeysSet.name == ''){
                this.$message({
                    showClose: true,
                    message: '内容或关键词不能为空',
                    type: 'info',
                    offset:'65',
                    duration:1000
                })
                return
            }
            this.$http.post('keysReplyTotext',{type:this.kefukeysType,appId:this.appId,content:this.timingTextarea,ruleId:this.msgRuleId,form:this.formKeysSet}).then((data)=>{
                var num = data.data.msg.length;
                if(data.data.success){
					if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'success',
						offset:'65',
						duration:1000
                    });
                }else{
                    if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'error',
						offset:'65',
						duration:1000
					});
                }
            })
        },
        keysReplyToSingletext(){//新增或修改一条规则用单图文回复
            if(this.fansSingleTextform.title == '' || this.fansSingleTextform.imgUrl == '' ||this.fansSingleTextform.description == '' || this.fansSingleTextform.link == '' || this.formKeysSet.name == '' ){
                this.$message({
                    showClose: true,
                    message: '内容或关键词不能为空',
                    type: 'info',
                    offset:'65',
                    duration:1000
                })
                return
            }
            this.$http.post('keysReplyToSingletext',{type:this.kefukeysType,appId:this.appId,content:this.fansSingleTextform,ruleId:this.msgRuleId,form:this.formKeysSet}).then((data)=>{
                var num = data.data.msg.length;
                if(data.data.success){
					if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'success',
						offset:'65',
						duration:1000
                    });
                }else{
                    if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'error',
						offset:'65',
						duration:1000
					});
                }
            })
        },
        keysReplyToPublicImg(){//新增或修改一条规则用素材管理中心的图片回复
            if(this.currentImg == '' || this.formKeysSet.name == ''){
                this.$message({
                    showClose: true,
                    message: '还没有选择图片或没有填写关键词',
                    type: 'info',
                    offset:'65',
                    duration:1000
                })
                return
            }
            this.$http.post('keysReplyToPublicImg',{type:this.kefukeysType,appId:this.appId,content:this.currentImg,ruleId:this.msgRuleId,form:this.formKeysSet}).then((data)=>{
                var num = data.data.msg.length;
                if(data.data.success){
					if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'success',
						offset:'65',
						duration:1000
                    });
                }else{
                    if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'error',
						offset:'65',
						duration:1000
					});
                }
            })
        },
        keysReplyToPublicVoice(){//新增或修改一条规则用素材管理中心的语音回复
            if(this.mediaVoice_id == '' || this.formKeysSet.name == ''){
                this.$message({
                    showClose: true,
                    message: '还没有选择语音或没有填写关键词',
                    type: 'info',
                    offset:'65',
                    duration:1000
                })
                return
            }
            this.$http.post('keysReplyToPublicVoice',{type:this.kefukeysType,appId:this.appId,media_id:this.mediaVoice_id,ruleId:this.msgRuleId,form:this.formKeysSet}).then((data)=>{
                var num = data.data.msg.length;
                if(data.data.success){
					if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'success',
						offset:'65',
						duration:1000
                    });
                }else{
                    if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'error',
						offset:'65',
						duration:1000
					});
                }
            })
        },
        keysReplyToPublicVideo(){//新增或修改一条规则用素材管理中心的视频回复
            if(this.videoName == '' || this.formKeysSet.name == ''){
                this.$message({
                    showClose: true,
                    message: '还没有选择视频或没有填写关键词',
                    type: 'info',
                    offset:'65',
                    duration:1000
                })
                return
            }
            this.$http.post('keysReplyToPublicVideo',{type:this.kefukeysType,appId:this.appId,media_id:this.mediaVideo_id,ruleId:this.msgRuleId,form:this.formKeysSet}).then((data)=>{
                var num = data.data.msg.length;
                if(data.data.success){
					if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'success',
						offset:'65',
						duration:1000
                    });
                }else{
                    if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'error',
						offset:'65',
						duration:1000
					});
                }
            })
        },
        twoTabs(tabs){//二级客服tabs切换
            if(tabs.index == '1'){
                this.getAllInsertStatus()
            }
        },
        getAllInsertStatus(){
            this.$http.post('getAllInsertStatus',{appId:this.appId}).then((data)=>{
                var num = data.data.msg.length;
                if(data.data.success){
                    this.isAllAccess = data.data.data.status;
                    this.appointKefu = data.data.data.kefuid;
                    this.appointKefuOptions = data.data.data.kefuList;
                }else{
                    if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'error',
						offset:'65',
						duration:1000
					});
                }
            })
        },
        setAllInsertStatus(){
            let datas = {}; 
            if(this.isAllAccess){
                datas = {appId:this.appId,status:this.isAllAccess,kefuid:this.appointKefu}
            }else{
                datas = {appId:this.appId,status:this.isAllAccess}
            }
            this.$http.post('setAllInsertStatus',datas).then((data)=>{
                var num = data.data.msg.length;
                if(data.data.success){
                    if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'success',
						offset:'65',
						duration:1000
					});
                }else{
                    if ( num>1 ) this.$message({
						showClose: true,
						message: data.data.msg,
						type: 'error',
						offset:'65',
						duration:1000
					});
                }
            })
        }
    },
    created(){
        this.appId = this.$route.query.appId;
        this.getList();
    }
}
</script>

<style scoped>
.el-card{
    margin: 8px;
    
}
.fanhuiBtn{
    color: #fff;
    width: 117px;
    margin: 60px 0 10px;
}

.errmsgbox {
    background: #FAE5B0;
    border: 0px #FAD163 solid;
    line-height: 24px;
    font-size: 12px;
    color: #666;
    padding: 5px 10px;
    text-align: left;
}
.timinga{
    color: #336699;
    text-decoration: none;
}
.timinga:hover{
    text-decoration: underline;
    color: #E64660;
}
.newRule{
    text-align: center;
}
.newRule button{
    margin: 20px 0 0;
}
.qrcode{
    text-align: center;
    margin-bottom: 10px;
}

.checkboxWrap{
    margin: 20px 0 ;
    border: 1px solid gray;
    padding: 10px;
}
.checkboxItem{
    width: 260px;
    margin-bottom: 10px;
}
.checkboxBtn{
    text-align: center;
}

/* 获取公众号素材图片 */
.publicImg{
    width: 29%;
    height: 200px;
    padding: 10px;
    margin: 0 10px 10px 0;
    display: inline-block;
    cursor: pointer;
    border:1px solid gray;
}
.publicImg img{
    width: 100%;
    height: 140px;
}
</style>